<script>
import { reactive, toRefs, onMounted } from "vue";
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  setup() {
    const VanDialog = Dialog.Component;

    const list = reactive({
      datalist: [
        {
          name: 1,
          num: 100,
        },
        {
          name: 10,
          num: 1000,
        },
        {
          name: 15,
          num: 1500,
        },
        {
          name: 20,
          num: 2000,
        },
        {
          name: 50,
          num: 5000,
        },
        {
          name: "其他金额",
          num: "点击输入金额",
        },
      ],
      curindex: 999,
      inputnum: null,
      numlist: [], //存储充值金额
      itemlist: null, //充值金额
      show: false,
      nums: 0,
      vip: 0,
      Unlocklist: [], //购买章节数组
    });
    //修改下标
    let getcurindex = (index, item) => {
      list.curindex = index;

      if (list.curindex != 5) {
        console.log(item);
        if (list.vip == 1) {
          list.itemlist = {
            name:item.name,
            num:item.num*1.2
          };
        }else{
 list.itemlist = item;
        }
       
      } else {
        list.itemlist = null;
      }
    };
    onMounted(() => {
      //解锁章节初始化
      let Unlock = window.localStorage.getItem("Unlock");

      list.Unlocklist = JSON.parse(Unlock);

      let panda = window.localStorage.getItem("panda");
      panda = JSON.parse(panda);
      list.numlist = panda;
      getnums();
      console.log(list.nums);
    });

    //vip初始化
    let vip = window.localStorage.getItem("vip");
    vip = JSON.parse(vip);
    list.vip = vip;

    //计算熊猫币
    let getnums = () => {
      list.nums = list.numlist.reduce((total, item) => {
        return (total += item.num);
      }, 0);
      if (list.Unlocklist) {
        if (list.Unlocklist.length > 0) {
          list.nums = list.nums - list.Unlocklist.length * 12;
          console.log(list.nums, "余额");
        }
      }
    };
    //进行支付
    let getpayment = () => {
      //  console.log(list.itemlist);
      if (list.curindex == 999) {
        console.log("请选择支付的金额");
        Toast("请选择支付的金额");
        return;
      } else if (list.inputnum == null && list.itemlist == null) {
        Toast("请选择充值的金额");
        return;
      } else {
        console.log("满足条件");

        Dialog.confirm({
          title: "是否支付",
        })
          .then(() => {
            if (list.curindex != 5) {
              list.itemlist.id = new Date().getTime();
              list.numlist.push(list.itemlist);
              let panda = list.numlist;
              panda = JSON.stringify(panda);
              window.localStorage.setItem("panda", panda);
            }

            if (list.curindex == 5) {
              if (list.vip == 1) {
                list.numlist.push({
                  name: list.inputnum,
                  num: list.inputnum * 120,
                  id: new Date().getTime(),
                });
              } else {
                list.numlist.push({
                  name: list.inputnum,
                  num: list.inputnum * 100,
                  id: new Date().getTime(),
                });
              }

              console.log(list.numlist);
              let panda1 = list.numlist;
              panda1 = JSON.stringify(panda1);
              window.localStorage.setItem("panda", panda1);
              console.log("zdy");
            }
            getnums();
            Toast.success("充值成功");
            list.curindex = 999;
            list.inputnum = null;
          })
          .catch(() => {
            Toast.fail("取消充值");
            // on cancel
            console.log("取消支付");
            list.curindex = 999;
            list.inputnum = null;
          });
      }
    };
    let filternum=(num)=>{
       if(num=='点击输入金额'){
        return   num
      }else if(list.vip==1){
       return num*1.2
      }else if(list.vip!=1){
             return num
      }
      
    }

    return {
      ...toRefs(list),
      getcurindex,
      getpayment,
      getnums,
      VanDialog,
      filternum
    };
  },
  
  directives: {
    // 在模板中启用 v-focus
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>
<template>
  <div class="searchView">
    <div class="search">
      <div class="left" @click="$router.go(-1)">
        <i class="iconfont icon-zuojiantou-copy"></i>
      </div>
      <div class="center">
        <span class="center-text"> 充值中心</span>
      </div>
      <div class="right">充值记录</div>
    </div>
    <!-- 氪金列表 -->
    <div class="content">
      <div class="items">
        <div class="item" v-for="(item, index) in datalist" :key="item.name">
          <div class="minvip" v-if="vip==1"></div>
          <!-- 正常 -->
          <div
            :class="['item-cur', { cur: curindex == index }]"
            @click="getcurindex(index, item)"
            v-show="curindex != 5 || index != 5"
          >
            <div class="item-text1">{{ item.name }}元</div>
            <div :class="['item-text2', { colorcur: index == 5 }]">
              {{filternum(item.num) }}<span v-if="index!=5">熊猫币</span>
            </div>
          </div>
          <!-- 输入框 -->
          <div
            :class="['item-cur', { cur: curindex == index }]"
            @click="getcurindex(index)"
            v-if="curindex == 5 && index == 5"
          >
            <div class="item-text1">
              <input type="text" v-model="inputnum" v-focus />元
            </div>
            <div :class="['item-text2', { colorcur: index == 5 }]">
              {{vip==1? inputnum * 120:inputnum * 100 }}熊猫币
            </div>
          </div>
          <div class="item-text3" v-show="index == 3">最多人充</div>
        </div>
      </div>
      <div class="balance">
        <span class="span1">余额：</span>
        <span class="span2">{{ nums }}熊猫币</span>
      </div>
      <!-- 氪金按钮 -->

      <div class="Recharge" @click="getpayment">立即充值</div>

      <div class="explain">
        <div class="text1">充值说明</div>
        <div>1.微信/支付宝充值比例为1:100</div>
        <div>2.充值到账偶尔会有一定时间延迟,请稍微等待一会</div>
        <div>3.如有任何充值问题请联系客服：<a>400-628-9988</a></div>
      </div>
      <!-- 确认-->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.cur {
  border: 1px solid rgb(185, 222, 213);
  background-color: rgb(233, 248, 245);
  color: rgb(0, 164, 128);
}
.searchView {
  padding: 50px 0;
  position: relative;
  .search {
    background-color: #fff;
    z-index: 10;
    position: fixed;
    border-bottom: 2px solid #f7f7f7;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    .center {
      width: 80%;
      //   position: relative;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      .center-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .right {
      font-size: 13px;
      color: rgb(75, 193, 170);
    }
  }
  .content {
    box-sizing: border-box;
    padding: 0 15px;
  }
  .items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
    .item {
      position: relative;
      text-align: center;
      margin-bottom: 6px;
      width: 168px;
      height: 92px;
      border: 1px solid rgb(241, 241, 241);
      .minvip{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 35px;
        left: 30px;
        background-image: url('../assets/img/minvip.png');
        background-size: 100% 100%;
      }
      .item-text1 {
        width: 100%;
        font-size: 16px;
        padding-top: 19px;
        input {
          width: 25px;
          background-color: rgb(233, 248, 245);
          border: none;
        }
      }
      .item-text2 {
        height: 50px;
        font-size: 12px;
        line-height: 14px;
        color: rgb(254, 119, 54);
      }
      .item-text3 {
        position: absolute;
        top: 0px;
        right: 0px;
        line-height: 20px;
        width: 54px;
        height: 20px;
        background-color: rgb(254, 119, 54);
        color: #fff;
        font-size: 12px;
      }
      .colorcur {
        color: rgb(159, 159, 161);
      }
    }
  }
  .balance {
    margin-bottom: 15px;

    .span1 {
      font-size: 14px;
    }
    .span2 {
      color: rgb(159, 159, 161);
      font-size: 14px;
    }
  }
  .Recharge {
    border-radius: 4px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(52, 195, 165);
    color: #fff;
  }
  .explain {
    margin-top: 30px;
    font-size: 14px;
    color: rgb(128, 127, 134);
    line-height: 30px;
    .text1 {
      font-size: 16px;
      color: #000;
      font-weight: 600;
    }
  }
}
::v-deep {
  .van-icon {
    display: none !important;
  }
}
.ewm {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  padding: 15px 37.5px;
  top: 60px;

  .text {
    width: 100%;
    text-align: center;
    line-height: 40px;
    line-height: 40px;
    font-size: 22px;
    color: #000;
    font-weight: 600;
  }
  .img {
    box-sizing: border-box;
    padding-left: 25px;
  }
}
.pop {
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  .icon {
    position: absolute;
    top: 10px;
    right: 20px;
  }
}
</style>